<template>
    <!-- 头部信息 -->
    <HeaderView title="我的收藏" :hasBack='true' path="mine"/>

    <ListView page="collect" class="list">
      <template v-slot:son="list">
        <div class="itemBox" v-for="item in list.son as any" :key="item.goods_id" @click="goDetail(item.goods_id)">
           <img :src="item.goods.cover_url" class="img"/>
           <p class="title">{{item.goods.title}}</p>
           <p class="description"><span class="price">￥{{item.goods.price}}</span></p>
        </div>
      </template>
    </ListView>

    <!-- 底部tabbar -->
    <BottomView/>

    <!-- 时间超时 -->
    <TimeOutView v-if="timeFlag"/>
  </template>

<script lang="ts" setup>
import HeaderView from '@/components/Header/IndexView.vue'
import BottomView from '@/components/Bottom/IndexView.vue'
import TimeOutView from '@/components/TimeOut/IndexView.vue'
import ListView from '@/components/List/IndexView.vue'

import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const timeFlag = ref(false) // 请求超时 显示界面

// 跳转详情页
const goDetail = (id: number) => {
  router.push({ path: '/detail', query: { id: id, fromPath: 'collect' } })
}

</script>
<script lang="ts">
export default {
  name: 'collectView'
}
</script>
<style scoped lang="scss">
.list{
  margin-top: 60px;
 .itemBox{
   width: 32%;
   margin-left: 1%;
   font-size: 12px;
   display: inline-block;
   margin-bottom: 16px;
   &:last-child{
     margin-bottom: 0;
   }
   .img{
      width: 100%;
      height: 100px;
   }
   .title{
     text-align: center;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     margin-bottom: 8px
   }
   .description{
     text-align: center;
     .price{
       color:red;
       font-weight: bold;
     }
     .like{
       margin-left: 10px;
     }
   }
 }
}
</style>
